import React, { useState, useEffect, useRef } from 'react';
import { Button, Form, Input, Collapse, Empty, Dropdown, Space } from 'antd';
import TreeDemo from '../../tree';
import empty from '../image/暂无数据.png';
import beJob from '../image/在职.png';
import mainJob from '../image/主岗.png';
import partJob from '../image/兼职.png';
import pho from '../image/图标.png';
import right from '../image/右箭头.png';

const { Panel } = Collapse;

const initData: DataNode[] = [
  {
    staffCode: '20400012',
    accountCode: 'caijf15',
    staffType: 1,
    sex: 1,
    staffName: '娘先加',
    staffState: 0,
    email: 'xuanmei1@chinaunicom.cn',
    mobile: '18655156226',
    staffBusinessType: 50,
    hrStaffType: 1143,
    quitDate: null,
    postList: [
      {
        postId: '113824173',
        postType: 1,
        orgName: '北京市通州区分公司.综合管理部',
        orgCode: '110000754',
        postState: null,
        companyCode: '6102',
        companyName: '西安市分公司',
        provinceCode: '10',
        job: '党委书记、总经理',
        path: '0000-001000-00100078843',
        pathName: null,
        systemList: [
          {
            systemCode: '5',
            systemName: '云公文',
          },
          {
            systemCode: '6',
            systemName: '对公',
          },
        ],
      },
      {
        postId: '1213824173',
        postType: 2,
        orgName: '天津市通州区分公司.综合管理部',
        orgCode: '110000754',
        postState: null,
        companyCode: '6102',
        companyName: '天津市分公司',
        provinceCode: '10',
        job: '党委书记、总经理',
        path: '0000-001000-00100078843',
        pathName: null,
      },
    ],
    systemList: [
      {
        systemCode: '1',
        systemName: '云公文',
      },
      {
        systemCode: '2',
        systemName: '法务中心',
      },
      {
        systemCode: '5',
        systemName: '共享中心',
      },
      {
        systemCode: '6',
        systemName: '财务中心',
      },
    ],
  },
];

const items: MenuProps['items'] = [
  {
    key: '113824173',
    label: '北京市通州区分公司.综合管理部',
    postType: 1,
    icon: <img src={mainJob} />,
  },
  {
    key: '1213824173',
    label: '天津市通州区分公司.综合管理部',
    postType: 1,
    icon: <img src={partJob} />,
  },
];

const PersonnelDimension: React.FC<TableListItem> = (props) => {
  const [form] = Form.useForm();
  const [initStatus, setInitData] = useState(true);

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const getFirstTwoChineseChars = (str: string) => {
    const match = str.match(/^[\u4e00-\u9fa5]{1,2}/);
    return match ? match[0] : '';
  };

  const newData = () => {
    const newArray = [];
    initData[0].forEach((employee: any) => {
      // 遍历当前员工的postList
      employee.postList.forEach((post: any) => {
        // 创建一个新对象，其key为postId，label为orgName
        const newPostObj = {
          key: post.postId,
          label: post.orgName,
          postType: post.postType,
        };
        // 将新对象添加到新数组中
        newArray.push(newPostObj);
      });
    });
  };

  const seeMore = () => {
    console.log('wacthmore');
  };

  const contentRight = () => {
    return (
      <div className="contentRight">
        <div>
          <div className="basInfTil">基本信息</div>
          <div className="basInfCon">
            <div className="circle">
              <span className="circleTxt">
                {getFirstTwoChineseChars(initData[0].staffName)}
              </span>
            </div>
            <div className="basCon">
              <div>
                <span style={{ marginBottom: '6px' }}>
                  {initData[0].staffName}
                  <img src={beJob} style={{ margin: '0 8px 8px 8px' }} />
                  <img
                    src={mainJob}
                    style={{
                      margin: '0 4px 8px 0',
                    }}
                  />
                  <span style={{ marginRight: '4px' }}>
                    {
                      initData[0].postList
                        .filter((item: any) => item.postType === 1)
                        .map((post: any) => post.orgName)[0]
                    }
                  </span>
                  <span style={{ color: 'rgb(50, 110, 255)' }}>
                    <Dropdown
                      menu={{ items }}
                      trigger={['click']}
                      placement="bottom"
                    >
                      <a onClick={(e) => e.preventDefault()}>
                        <Space>查看更多岗位</Space>
                      </a>
                    </Dropdown>
                  </span>
                </span>
              </div>
              <div>
                <span style={{ marginRight: '16px' }}>
                  编码：{initData[0].staffCode}
                </span>
                <span style={{ marginRight: '16px' }}>
                  电话：{initData[0].mobile}
                </span>
                <span style={{ marginRight: '16px' }}>
                  邮箱：{initData[0].email}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className="basInfTil">应用入口</div>
        <div style={{ display: 'flex' }}>
          {initData[0].systemList.map((item) => {
            return (
              <div
                style={{
                  display: 'flex',
                  width: '191px',
                  height: '68px',
                  padding: '12px',
                  marginRight: '16px',
                  borderRadius: '4px',
                  boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.1)',
                  background:
                    'linear-gradient(86.00deg, rgb(243, 243, 255) 1.371%,rgb(245, 251, 255) 99.738%)',
                }}
              >
                <div style={{ marginRight: '12px' }}>
                  <img src={pho} />
                </div>
                <div>
                  {item.systemName}
                  <div>
                    查看更多
                    <img src={right} onClick={seeMore} />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  const onChange = (key: string | string[]) => {
    console.log(key);
  };

  return (
    <>
      <div className="searchWrapper">
        <Form
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          colon={false}
          style={{ display: 'flex', flexWrap: 'nowrap' }}
        >
          <Form.Item name="姓名" label="姓名" className="formItem">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item name="手机" label="手机" className="formItem">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item name="邮箱" label="邮箱" className="formItem">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item className="formItem">
            <Button type="primary" htmlType="submit" className="searchBtn">
              搜索
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className="content">
        <div className="contentLeft">
          <TreeDemo />
        </div>
        <div className="divider"></div>
        {initStatus ? (
          contentRight()
        ) : (
          <Empty image={empty} description={false} className="empty" />
        )}
      </div>
    </>
  );
};

export default PersonnelDimension;
